<template>
  <div class="discover-view">
    <el-header class="view-header">
      <h2>发现</h2>
    </el-header>
    <el-scrollbar class="view-content">
      <!-- 显示列表或详情 -->
      <DiscoverItemDetail
        v-if="selectedItem"
        :item-id="selectedItem"
        @back="selectedItem = null"
      />
      <div v-else class="discover-list">
        <div
          v-for="item in discoverItems"
          :key="item.id"
          class="discover-item"
          @click="selectedItem = item.id"
        >
          <el-icon :size="24" class="discover-icon">
            <component :is="item.icon" />
          </el-icon>
          <span>{{ item.name }}</span>
          <el-icon :size="16" class="arrow-icon"><ArrowRight /></el-icon>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import {
  Picture,
  Shop,
  VideoCamera,
  CollectionTag
} from '@element-plus/icons-vue'
import DiscoverItemDetail from './DiscoverItemDetail.vue'

const selectedItem = ref(null)

const discoverItems = [
  { id: 1, name: '全部收藏', icon: Picture },
  { id: 2, name: '最近使用', icon: Shop },
  { id: 3, name: '链接', icon: VideoCamera },
  { id: 4, name: '图片与视频', icon: CollectionTag },
  { id: 5, name: '文件', icon: Picture },
  { id: 6, name: '聊天记录', icon: Shop },
  { id: 7, name: '语言', icon: VideoCamera },
  { id: 8, name: '标签', icon: CollectionTag },
]
</script>

<!-- 样式保持不变 -->
<style lang="scss" scoped>
.discover-view {
  height: 100%;
  display: flex;
  flex-direction: column;

  .view-header {
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }

  .view-content {
    flex: 1;
    padding: 10px;
  }

  .discover-list {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
  }

  .discover-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    transition: background-color 0.3s;
    position: relative;

    &:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 50px;
      right: 0;
      bottom: 0;
      height: 1px;
      background-color: #f0f0f0;
    }

    &:hover {
      background-color: #f5f5f5;
    }

    .discover-icon {
      margin-right: 15px;
      color: #409eff;
    }

    .arrow-icon {
      margin-left: auto;
      color: #999;
    }
  }
}
</style>
